﻿//alert("helo");

// Contains all Contact data
var ContactData = [];
// current id
var currId = -1;


// AJAX Call using XHR - FB URL
function firstAjax() {
    var xhr = new XMLHttpRequest(); // make XHR object
    xhr.open("GET", "https://contact413.firebaseio.com/Contacts/.json", true); // open door
    xhr.send(); // walk thru / call the XHR
    //  see reults
    xhr.onload = function () {
        if (this.status >= 200 && this.status < 400) {
            // data cameback, use data....
            //console.log("Data is ready ORIGNAL: ", this.response);
            var finData = JSON.parse(this.response);
            //console.log("Data is ready PARSED", finData);
            renderToScreen(finData);
        } else {  /*some error*/ }
    }
}


// call the XHR
function TestTheXhr() {
    console.log("Test started...");
    firstAjax()
    console.log("Test ended...");
}
TestTheXhr();

// Renders the data to the screen
function renderToScreen(data) {
    console.log("rendering to screen");
    var htmlStr = "";
    htmlStr += "<table class='table table-responsive'>";
    htmlStr += "<tr><th>Contact</th><th>Actions</th></tr>"
    var counter = 0;
    for (var i in data) {
        // populate the arr w/contact data
        ContactData[counter] = { id: i, fName: data[i].fName, lName: data[i].lName }

        console.log(data[i]);
        htmlStr += "<tr><td>" + data[i].fName + " " + data[i].lName + "</td><td><button class='btn btn-warning' onClick='tryEdit(" + counter + ")'>EDIT</button> - <button class='btn btn-danger' onClick='ajaxDelete(" + counter + ")'>DELETE</button></td><tr>"
        counter++;
    }
    htmlStr += "</table>";

    // Render the string to the Div
    $("#myResults").html(htmlStr);

}



$("#UpdateContact").hide();

// try editing
function tryEdit(cid) {
    console.log(ContactData[cid]);
    $("#userFName").val(ContactData[cid].fName);
    $("#userLName").val(ContactData[cid].lName);
    currId = ContactData[cid].id;
    //
    $("#UpdateContact").show();
    $("#AddContact").hide();
}

// Event for save changes...
$("#UpdateContact").click(function () {
    var uFName = $("#userFName").val();
    var uLName = $("#userLName").val();
    console.log("edit user: ", uFName, uLName);
    var objToPost = {
        fName: uFName,
        lName: uLName
    }
    // send to ajax
    updateAjax(objToPost);
    $("#UpdateContact").hide();
    $("#AddContact").show();
    $("#userFName").val("");
    $("#userLName").val("");
});
//AJAX update item FB
function updateAjax(itemToPost) {
    var xhr = new XMLHttpRequest(); // make XHR object
    xhr.open("PUT", "https://contact413.firebaseio.com/Contacts/"+ currId +"/.json", true); // open door
    xhr.send(JSON.stringify(itemToPost)); // walk thru / call the XHR
    //  see reults
    xhr.onload = function () {
        if (this.status >= 200 && this.status < 400) {
            // successfull post
            firstAjax();

        } else {  /*some error*/ }
    }
}


function ajaxDelete(index) {
    currId = ContactData[index].id; // get the guid
    var xhr = new XMLHttpRequest(); // make XHR object
    xhr.open("DELETE", "https://contact413.firebaseio.com/Contacts/"+ currId +"/.json", true); // open door
    xhr.send(); // walk thru / call the XHR
    //  see reults
    xhr.onload = function () {
        if (this.status >= 200 && this.status < 400) {
            // successfull post
            firstAjax();

        } else {  /*some error*/ }
    }
}






// Add event for AddContact
$("#AddContact").click(function () {
    var uFName = $("#userFName").val();
    var uLName = $("#userLName").val();
    console.log("new user: ", uFName, uLName);
    var objToPost = {
        fName: uFName,
        lName: uLName
    }
    postAjax(objToPost);
});
//AJAX post to FB
function postAjax(itemToPost) {
    var xhr = new XMLHttpRequest(); // make XHR object
    xhr.open("POST", "https://contact413.firebaseio.com/Contacts/.json", true); // open door
    xhr.send(JSON.stringify(itemToPost)); // walk thru / call the XHR
    //  see reults
    xhr.onload = function () {
        if (this.status >= 200 && this.status < 400) {
            // successfull post
            firstAjax();
            
        } else {  /*some error*/ }
    }
}
